<template>
	<view>
		<u-sticky>
			<view class="search">
				<u-search placeholder="请输入课程名称" v-model="keyword" @search="search" @custom='search'></u-search>
			</view>
		</u-sticky>
		<view class="list">
			<view
				style="border-radius: 40rpx; background-color: #fff; padding: 20rpx; box-sizing: border-box; margin-top: 30rpx;"
				v-for="(item,index) in baomingList" :key="index" @click="tobaomingDeatile(item.id,item.paperId)">
				<view class="info-title">
					{{item.curriculumName}}
				</view>
				<view class="list-item">

					<view class="list-img">
						<image class="w100h100" :src="item.curriculumImage" mode=""></image>
					</view>
					<view class="list-info">

						<view class="info-content">
							{{item.curriculumIntroduction}}
						</view>
						<view class="info-type">
							<view class="" style="margin-right: 20rpx;">
								{{item.updateTime}}
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		curriculumpage
	} from "@/api/home/index.js"
	export default {
		data() {
			return {
				keyword: '',
				baomingList: []
			}
		},
		async onLoad() {
			let res = await curriculumpage({
				size: '100',
				page: '1',
				areaName: uni.getStorageSync('cityName').replace(/市/g, ""),
			})
			res.data.forEach(el => {
				el.updateTime = el.updateTime.slice(0, 16)
			})
			this.baomingList = res.data
		},
		methods: {
			tobaomingDeatile(val, paperId) {
				console.log(val);
				if (uni.getStorageSync('userInfo').name && uni.getStorageSync('userInfo').phone) {
					uni.setStorageSync('paperId', paperId)
					uni.navigateTo({
						url: `/packageA/pages/dingzhi/dingzhi?id=${val}`
					})
				} else {
					uni.showToast({
						icon: 'none',
						duration: 2000,
						title: '请完善个人信息'
					});

					setTimeout(() => {
						uni.navigateTo({
							url: `/packageA/pages/xiugai/xiugai`
						})
					}, 1000)
				}

			},
			async search() {
				let res1 = await curriculumpage({
					size: '100',
					page: '1',
					areaName:uni.getStorageSync('cityName').replace(/市/g, ""),
					curriculumName: this.keyword
				})
				res1.data.forEach(el => {
					el.updateTime = el.updateTime.slice(0, 16)
				})
				this.baomingList = res1.data
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		position: -webkit-sticky;
		position: sticky;
		top: 80rpx;
		z-index: 999;

		padding: 20rpx;
		background-color: $u-bg-color;
		box-shadow: -2px 12px 5px #e3e3e3;
		-moz-box-shadow: -2px 12px 5px #e3e3e3;
		-webkit-box-shadow: -2px 12px 5px #e3e3e3;
	}

	.list {
		box-sizing: border-box;
		width: 740rpx;
		padding: 20rpx;
		margin: 0 auto;


		.list-item {


			background-color: $u-bg-color;
			display: flex;
			flex-shrink: 0;



			.list-img {
				flex-shrink: 0;
				width: 180rpx;
				height: 180rpx;
				margin-right: 30rpx;
				border-radius: 30rpx;
				overflow: hidden;
			}

			.list-info {
				flex-shrink: 0;
				width: 420rpx;



				.info-content {
					box-sizing: border-box;
					margin: 5rpx;
					width: 100%;
					font-size: 28rpx;
					color: #666666;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;

					overflow: hidden;
					text-overflow: ellipsis;
				}

				.info-type {
					box-sizing: border-box;
					// padding: 5rpx;
					display: flex;
					justify-content: flex-end;
					color: $u-main-color;
					font-size: 26rpx;
					color: #666666;
					padding: 20rpx 0;
				}
			}
		}
	}

	.info-title {
		padding-bottom: 20rpx;
		padding-left: 10rpx;
		width: 100%;
		flex-shrink: 0;
		font-size: 32rpx;
		color: $u-main-color;
		// font-weight: 700;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}
</style>